<template>
  <div class="body"
       v-loading="realFlowLoading"
       :element-loading-text="otherI18n.Loading" >
    <bpm-d-navbar :hasPrint="true"
                  @print="print"/>
    <bpm-d-diagram v-show="diagramVisible"/>
    <bpm-d-history v-show="historyVisible"/>
    <!--业务实现-->
    <div v-show="mainVisible">
      <bpm-d-basearea :title="getLanguage('title.expenseReimburseProcess')" />
      <bpm-d-businessarea />
      <bpm-d-attachframe :allowCreate="false"
                         :allowUpdate="false"
                         :allowDelete="false"
                         :allowUpdateOthers="false"
                         :allowDeleteOthers="false"/>
    </div>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'

export default {
  name: 'ViewScene',
  data () {
    return {
      flowLoading: false,
      baseTitle: this.getLanguage('title.expenseReimburseProcess')
    }
  },
  computed: {
    ...mapState(['mainVisible', 'diagramVisible', 'historyVisible', 'lang', 'langEnum', 'pageType', 'pageTypeEnum']),
    ...mapState(['inst', 'bpmcoreI18n', 'ssc', 'apiloading', 'otherI18n']),
    ...mapState(['userId', 'tsId', 'dictFields', 'viewTableVisible', 'view1stMounted']),
    realFlowLoading () {
      return this.flowLoading || (this.apiloading > 0)
    },
    chailvRowGridInfo () {
      console.log('chailvrow payment grid item', this.$store.state.chailvRow.ssc.reimburse.whBtReimburseDdSub)
      return this.$store.state.chailvRow.ssc.reimburse.whBtReimburseDdSub
    },
    showChailvPart () {
      // console.log('chailvROW', this.chailvRowGridInfo)
      return (this.chailvRowGridInfo && this.chailvRowGridInfo.tsId)
    },
    whBtTravelSubsidyDetails: {
      get () {
        return this.ssc.reimburse.whBtTravelSubsidyDetails
      },
      set (value) {
        this.$store.commit('SetDataSscReimburseWhBtTravelSubsidyDetails', value)
      }
    },
    whBtTransportationDetails: {
      get () {
        return this.ssc.reimburse.whBtTransportationDetails
      },
      set (value) {
        this.$store.commit('SetDataSscReimburseWhBtTransportationDetails', value)
      }
    },
    whBtFareDetails: {
      get () {
        return this.ssc.reimburse.whBtFareDetails
      },
      set (value) {
        this.$store.commit('SetDataSscReimburseWhBtFareDetails', value)
      }
    },
    whBtStayDetails: {
      get () {
        return this.ssc.reimburse.whBtStayDetails
      },
      set (value) {
        this.$store.commit('SetDataSscReimburseWhBtStayDetails', value)
      }
    }
  },
  created () {
    // 更新费用报销页面类型
    this.setPageType(this.pageTypeEnum.view)
  },
  mounted () {
    console.log('只读页面 mounted start')
    // 更新费用报销页面类型
    this.setPageType(this.pageTypeEnum.view)
    // 通用加载服务
    console.log('URL======', window.location.href)
    this.loadResource({me: this})
    //
    if (this.pageType !== this.pageTypeEnum.view) { return }
    if (this.view1stMounted) {
      return
    }
    console.log('setView1stMounted', 4)
    this.setView1stMounted(true)
    this.$nextTick(function () {
      console.log('whole view mounted........')
      this.flowLoading = true
      setTimeout(() => {
        console.log('all needed ajax asked here for view………………………………………………')
        console.log('view state pageType:' + this.pageType)

        let paramJson = {}
        paramJson.me = this
        // paramJson.tableNames = 'wh_bt_reimburse,wh_bt_reimburse_dd_sub,wh_bt_reimburse_costshare,wh_bt_travelsubsidydetails,wh_bt_transportationdetails,wh_bt_faredetails,wh_bt_staydetails,wh_bt_reimburse_rcm_details,wh_bt_reimburse_rcm_sub'
        paramJson.tableNames = 'WH_BT_FAREDETAILS,WH_BT_STAYDETAILS,WH_BT_TRANSPORTATIONDETAILS,WH_BT_TRAVELSUBSIDYDETAILS,WH_BT_REIMBURSE_COSTSHARE,WH_BT_REIMBURSE_RCM_SUB,WH_BT_REIMBURSE_DD_SUB,WH_BT_REIMBURSE'
        paramJson.BB = 'Y'
        console.log('==========================approve=============================')
        this.getDataSscReimburseFromMoreTable(paramJson)

        // this.getDataSscReimburseWhBtReimburse({me: this})
        // this.getDataSscReimburseWhBtReimburseRcmSub({me: this, async: true})
        // 是否显示制证信息
        this.checkReimburseViewTableVisible({me: this, async: true})
        // let param = {}
        // param.me = this
        // param.companyCode = this.ssc.reimburse.whBtReimburse.reimbursecompanycode
        // this.queryBBOptions(param)
        // paymentarea
        // console.log('yemian down.....')
        // let json = {
        //   // async: true,
        //   me: this,
        //   succfunc: function () {
        //     JsReimburseDraft.amountReimSum(null, 'datas')
        //   }
        // }
        // console.log('yemian up.....')
        // this.getDataFromTableDdSub(json)
        // //paymentgrid
        // if (this.showChailvPart) {
        // console.log('gggggggggg122')
        // this.getAllGrandSubTable()
        // this.AJAX_Reim_013_Count_SubChild({me: this}) // 调用013算孙子表的各自合计金额
        // }
        // splitarea
        // this.getDataFromTableCostshare({me: this, async: true})
        // postarea
        // this.getDataFromTableRcmDetails({me: this, async: true})
        console.log('all needed ajax asked here^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^')
        this.flowLoading = false
      }, 100)
    })
  },
  methods: {
    ...mapActions(['loadResource']),
    ...mapActions(['setPageType', 'getDataSscReimburseFromMoreTable']),
    ...mapActions(['getDataSscReimburseWhBtReimburseRcmSub', 'getDataSscReimburseWhBtReimburse', 'checkReimburseViewTableVisible', 'queryBBOptions']),
    ...mapActions(['getDataFromTableDdSub', 'AJAX_Reim_013_Count_SubChild', 'queryInternalOrder']),
    ...mapActions(['getDataFromTableFareDetails', 'getDataFromTableStayDetails', 'getDataFromTableTransportationDetails', 'getDataFromTableTravelSubsidyDetails']),
    ...mapActions(['getDataFromTableCostshare', 'getDataFromTableRcmDetails', 'setView1stMounted']),
    print () {
      this.$router.push('/SscReimbursePrint')
    },
    getAllGrandSubTable () {
      // 补贴 出租 交通 住宿
      if (!this.whBtFareDetails || this.whBtFareDetails.length <= 0) {
        this.getDataFromTableFareDetails({me: this, async: true})
      }
      if (!this.whBtStayDetails || this.whBtStayDetails.length <= 0) {
        this.getDataFromTableStayDetails({me: this, async: true})
      }
      if (!this.whBtTransportationDetails || this.whBtTransportationDetails.length <= 0) {
        this.getDataFromTableTransportationDetails({me: this, async: true})
      }
      if (!this.whBtTravelSubsidyDetails || this.whBtTravelSubsidyDetails.length <= 0) {
        this.getDataFromTableTravelSubsidyDetails({me: this, async: true})
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .body {
    display: flex;
    flex-direction: column;
    font-size: 12px;
  }
</style>
